Export DataTable to HTML in C#.net

Introduction

I would like to share a way by which we can export datatable to HTML format.

This code can be used as reporting purpose where sometimes client needs output

data in HTML format.

Steps: first we will bind Datatable to datagridview

a. Binding DatagridView using Datatable

Steps:

1. Create datatable and Define Columns


 DataTable table = new DataTable();
 table.Columns.Add("ID", typeof(int));
 table.Columns.Add("NAME", typeof(string));
  table.Columns.Add("CITY", typeof(string));

2. Add Rows

  table.Rows.Add(111, "Devesh", "Ghaziabad");
  table.Rows.Add(222, "ROLI", "KANPUR");
  table.Rows.Add(102, "ROLI", "MAINPURI");
  table.Rows.Add(212, "DEVESH", "KANPUR");

3. Binding Datagridview

dataGridView1.DataSource=table;

4. Running the code following would be screen.

Exporting Datatable to HTML.

I have written generic code which could create html text for every datatable.

You can use this code directly in your project for reporting purpose.

Code below:

protected string ExportDatatableToHtml(DataTable dt)
        {
            StringBuilder strHTMLBuilder = new StringBuilder();
            strHTMLBuilder.Append("<html >");
            strHTMLBuilder.Append("<head>");
            strHTMLBuilder.Append("</head>");
            strHTMLBuilder.Append("<body>");
            strHTMLBuilder.Append("<table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'>");
           
            strHTMLBuilder.Append("<tr >");
            foreach (DataColumn myColumn in dt.Columns)
            {
                strHTMLBuilder.Append("<td >");
                strHTMLBuilder.Append(myColumn.ColumnName);
                strHTMLBuilder.Append("</td>");
 
            }
            strHTMLBuilder.Append("</tr>");
         
 
            foreach (DataRow myRow in dt.Rows)
            {
 
                strHTMLBuilder.Append("<tr >");
                foreach (DataColumn myColumn in dt.Columns)
                {
                    strHTMLBuilder.Append("<td >");
                    strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());
                    strHTMLBuilder.Append("</td>");
 
                }
                strHTMLBuilder.Append("</tr>");
            }
 
            //Close tags.
            strHTMLBuilder.Append("</table>");
            strHTMLBuilder.Append("</body>");
            strHTMLBuilder.Append("</html>");
         
          string  Htmltext = strHTMLBuilder.ToString();
 
          return Htmltext;
 
        }

Understanding the code.

i) We created generic function which take datatable as parameter

ii) We are using stringbuilder to create dynamic html text.

iii) Here Output would contains equal number of rows and column as we have

in datagridview.

iv) Creating columns in HTML

foreach (DataColumn myColumn in dt.Columns)
            {
                strHTMLBuilder.Append("<td >");
                strHTMLBuilder.Append(myColumn.ColumnName);
                strHTMLBuilder.Append("</td>"); 
            }

v) Copy Data. Following code would create equal number of rows as we have in

datatable and copy it data to html rows.

foreach (DataRow myRow in dt.Rows)
            {
 
                strHTMLBuilder.Append("<tr >");
                foreach (DataColumn myColumn in dt.Columns)
                {
                    strHTMLBuilder.Append("<td >");
                    strHTMLBuilder.Append(myRow[myColumn.ColumnName].ToString());
                    strHTMLBuilder.Append("</td>");
 
                }
                strHTMLBuilder.Append("</tr>");
            }

d. After executing above code we would get following html

<html ><head></head><body><table border='1px' cellpadding='1' cellspacing='1' bgcolor='lightyellow' style='font-family:Garamond; font-size:smaller'><tr ><td >ID</td><td >NAME</td><td >CITY</td></tr><tr ><td >111</td><td >Devesh</td><td>Ghaziabad</td></tr><tr ><td >222</td><td >ROLI</td><td >KANPUR</td></tr><tr ><td >102</td><td >ROLI</td><td >MAINPURI</td></tr><tr ><td >212</td><td >DEVESH</td><td >KANPUR</td></tr></table></body></html>

e. Creating HTML file

string HtmlBody = ExportDatatableToHtml(table)
System.IO.File.WriteAllText(@"c:\abc.HTML", HtmlBody);

f. OutPut:

g. Conclusion

We have learned how to create html of datatable.

asp.net

Updated 07-Sep-2019

articles

Export DataTable to HTML in C#.net

Introduction

Steps: first we will bind Datatable to datagridview

a. Binding DatagridView using Datatable

Steps:

1. Create datatable and Define Columns

Devesh Omar

Leave Comment

Comments

Liked By